<template>
    <div class="base-model" @contextmenu.native.prevent>
        <el-container class="container">
            <el-aside class="aside-bar">
                <div :class="`cursor-pointer forbid-select flex-display-center menu ${(currentPath || '/') === '/' ? 'current-select' : ''}`"
                    @click="go('/')">
                    <el-icon size="18">
                        <Connection />
                    </el-icon>
                    <span>仓库地址</span>
                </div>
                <div :class="`cursor-pointer forbid-select flex-display-center menu ${currentPath === '/search' ? 'current-select' : ''}`"
                    @click="go('/search')">
                    <el-icon size="18">
                        <Search />
                    </el-icon>
                    <span>
                        文件搜索
                    </span>
                </div>
            </el-aside>
            <el-main class="inner-main" ref="main">
                <slot />
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
import router, { constantRouter } from "@/router"
import { Connection, Search } from '@element-plus/icons-vue'

const currentPath = ref(window.location.pathname)

watch(currentPath, v => {
    if (!constantRouter.filter(e => e.path === v && e.path !== '/:catchAll(.*)').length) currentPath.value = "/"
}, { immediate: true })

const go = (url) => {
    router.push(url)
    currentPath.value = url
}
</script>

<style lang="scss" scoped>
:deep(.inner-main) {
    height: var(--main-height); //calc(100vh - v-bind(height));
    padding: 0;
    overflow: hidden;
    color: var(--font-color);
    z-index: 1;

    @media screen and (min-width: 200px) and (max-width: 900px) {
        width: 100% !important;
    }

    @media screen and (min-width: 200px) and (max-width: 400px) {
        max-height: calc(100vh - 65px);
    }
}

:deep(.container) {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    position: relative;
    background-size: cover;

    @media screen and (min-width: 200px) and (max-width: 400px) {
        background-position: 50% !important;
    }
}

:deep(.base-model) {
    width: 100%;
    height: 100%;
    overflow: auto;
    position: relative;
}

:deep(.menu) {
    padding: 20px 0;
}

:deep(.current-select) {
    background: rgb(185 145 0 / 70%);
    color: white;
}

.aside-bar {
    box-shadow: -1px 0px 5px 0px var(--el-input-border-color, var(--el-border-color)) inset;
    width: 20%;
    max-width: 200px;
    min-width: 150px;
}
</style>